<template>
  <div id="test_my_tag">
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.id }}--{{ item.name }}--<img src="../pics/坤哥.jpg" />--{{ item.desc }}--
        <MyTag 
        v-model="tempText" 
        />
      </li>
    </ul>
  </div>
</template>

<script>
import MyTag from "../components/MyTag.vue";

export default {
  name: "AppTestMyTag",
  components: {
    MyTag,
  },
  data() {
    return {
      list: [
        { id: 1, name: "Apple", picUrl: "../pics/坤哥.jpg", desc: "红色苹果" },
        { id: 2, name: "Orange", picUrl: "../pics/坤哥.jpg", desc: "新鲜橘子" },
        { id: 3, name: "小米手机", picUrl: "../pics/坤哥.jpg", desc: "质量很好" },
        { id: 4, name: "红米手机", picUrl: "../pics/坤哥.jpg", desc: "拍照一流" },
        { id: 5, name: "荣耀", picUrl: "../pics/坤哥.jpg", desc: "千元机" },
      ],
      tempText: "水杯",
    };
  },
};
</script>

<style>
ul {
  display: flex;
  flex-direction: column;
}
li {
  padding: auto 10px;
  margin: auto 10px;
  border: solid 1px black;
  display: flex;
  flex-direction: row;
}
</style>
